<template>
  <div class="videos mt-4 pl-4">
    <ul class="row">
      <li class="col col-12 col-sm-12 col-md-12 col-lg-6" :key="index" v-for="(item,index) in list">
        <div>
         <video-com
           :src="getUrl(item.videoUrl)"
         ></video-com>
        </div>
        <div class="text">
          {{item.title}}
        </div>
      </li>
    </ul>
  </div>

</template>

<script>
  import VideoCom from "@/components/videoCom";
  export default {
    props: ['list'],
    computed: {},
    data() {
      return {

      }

    },
    components: {
      VideoCom
    }
    ,
    mounted() {

    },
    created() {
    },
    methods: {}
  }
</script>

<style lang="less" >
  @import "~assets/style/public";

  .videos {
    .video-js{
      height: 220px !important;
    }
    ul {
      li {
        margin-bottom: 20/@size;
        video {
          width: 100%;
        }

        .text {
          font-family: @font-first;
          font-size: 16/@size;
          color: #222222;
          line-height: 24/@size;
          text-align: center;
          .over-flow-text();
        }
      }
    }
  }

  @media (min-width: 320px) and (max-width: 767px) {
    .videos {
      ul {
        li {
          .text {
            font-size: @font-24;
            .over-flow-text();
            -webkit-line-clamp: 1;
            line-height: 1.3;
          }
        }
      }
    }
  }


</style>
